<template>
  <div ref="bsWrapper" class="pulldown-bswrapper">
    <div class="pulldown-scroller">
      <!-- 下拉刷新 -->
      <div class="pulldown-wrapper" v-if="hasListener('pulldown')">
        <div v-show="beforePullDown">
          <span>下拉刷新</span>
        </div>
        <div v-show="!beforePullDown">
          <div v-show="isPullingDown">
            <span>加载中...</span>
          </div>
          <div v-show="!isPullingDown">
            <span>刷新成功</span>
          </div>
        </div>
      </div>
      <!-- end -->
      <div ref="container">
        <slot></slot>
      </div>
      <!-- <ul class='pulldown-list'>
                <li
                v-for='i of dataList'
                :key='i + Math.random()'
                class='pulldown-list-item'
                >{{ `I am item ${i} ` }}</li>
      </ul>-->
      <!-- 上拉加载 -->
      <div class="pullup-wrapper" v-if="hasListener('pullup')">
        <div v-if='pullupIsClose'>
           <span class="pullup-txt">已无更多数据</span>
        </div>
        <div v-else-if="!isPullUpLoad" class="before-trigger">
          <span class="pullup-txt">上拉加载更多</span>
        </div>
        <div v-else class="after-trigger">
          <span class="pullup-txt">加载中...</span>
        </div>
      </div>
      <!-- end -->
    </div>
  </div>
</template>
<script>
import BScroll from "@better-scroll/core";
import PullDown from "@better-scroll/pull-down";
import Pullup from "@better-scroll/pull-up";

BScroll.use(PullDown);
BScroll.use(Pullup);

function getOneRandomList(step = 0) {
  const arr = Array.apply(null, { length: 30 + step }).map(
    (...args) => args[1]
  );
  return arr.sort(() => Math.random() - 0.5);
}

const TIME_BOUNCE = 800;
const TIME_STOP = 600;
const THRESHOLD = 70;
const STOP = 56;
let STEP = 0;

export default {
  data() {
    return {
      beforePullDown: true,
      isPullingDown: false,
      dataList: [],
      isPullUpLoad: false,
      // 当内容高度不够时，触发下拉
      containerHeight: {
        height: "500px"
      }
    };
  },
  props: {
    data: {
      default: []
    }
  },
  created() {
    this.bscroll = null;
    this.pullIsLoading = false;
    this.pullupIsClose = false;
  },
  watch: {
    data() {
      setTimeout(() => {
        this.initBscroll();
      }, 20);
    }
  },
  mounted() {
    console.log(this.$listeners);
    // const wrapperHeight = this.$refs.bsWrapper.offsetHeight;
    // this.containerHeight.height = `${wrapperHeight + 1}px`;
    this.initBscroll();
  },
  activated() {
    this.initBscroll();
  },
  methods: {
    // 初始化betterScroll
    initBscroll() {
      if (!this.bscroll) {
        this.bscroll = new BScroll(this.$refs.bsWrapper, {
          click: true,
          scrollY: true,
          bounceTime: TIME_BOUNCE,
          pullDownRefresh: this.hasListener("pulldown")
            ? {
                threshold: THRESHOLD,
                stop: STOP
              }
            : false,
          pullUpLoad: this.hasListener("pullup")
        });
        this.hasListener("pulldown") &&
          this.bscroll.on("pullingDown", this.pullingDownHandler);
        this.hasListener("pullup") &&
          this.bscroll.on("pullingUp", this.pullingUpHandler);
        this.bscroll.on("scroll", this.scrollHandler);
        this.bscroll.refresh();
      } else {
        this.bscroll.refresh();
      }
    },
    hasListener(type) {
      let flag = false;
      for (let key in this.$listeners) {
        if (key == type) {
          flag = true;
          break;
        }
      }
      return flag;
    },
    // 监听滚动
    scrollHandler(pos) {
      // console.log(pos.y)
      this.$emit("scroll", pos);
    },
    // 下拉刷新
    async pullingDownHandler() {
      this.beforePullDown = false;
      this.isPullingDown = true;
      this.$emit("pulldown");
    },
    // 停止下拉刷新
    async finishPullDown() {
      this.isPullingDown = false;
      const stopTime = TIME_STOP;
      await new Promise(resolve => {
        setTimeout(() => {
          this.bscroll.finishPullDown();
          resolve();
        }, stopTime);
      });
      setTimeout(() => {
        this.beforePullDown = true;
        this.bscroll.refresh();
      }, TIME_BOUNCE);
    },
    // 上拉加载数据
    pullingUpHandler() {
      this.isPullUpLoad = true;
      if (!this.pullIsLoading) this.$emit("pullup");
      this.pullIsLoading = true;
    },
    // 停止上拉加载
    finishPullUp() {
      this.pullIsLoading = false;
      this.bscroll.finishPullUp();
      this.bscroll.refresh();
      this.isPullUpLoad = false;
    },
    // 关闭上拉加载
    closePullUp() {
      this.bscroll.closePullUp();
      this.pullupIsClose = true;
    },
  }
};
</script>

<style lang='scss'>
.pulldown {
  height: 100%;
}
.pulldown-bswrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.pulldown-list {
  // padding: 0;
}
// .pulldown-list-item {
//   padding: 10px 0;
//   list-style: none;
//   border-bottom: 1px solid #ccc;
// }
.pulldown-wrapper {
  position: absolute;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  transform: translateY(-100%) translateZ(0);
  text-align: center;
  color: #999;
}
.pullup-wrapper {
  padding: 20px;
  text-align: center;
  color: #999;
}
</style>

